<template>
  <text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" @click="onClick">{{ unicode }}</text>
</template>

<script setup>
import { computed } from 'vue'
import icons from './icons.js'

// 配置占位组件
if (typeof Component !== 'undefined') {
  Component({
    options: {
      placeholder: 'components/uni-icons/placeholder'
    }
  })
}

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#333333'
  },
  size: {
    type: [Number, String],
    default: 16
  },
  customPrefix: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

const unicode = computed(() => {
  const code = icons.glyphs.find(v => v.font_class === props.type)
  if (code) {
    return unescape(`%u${code.unicode}`)
  }
  return ''
})

const onClick = () => {
  emit('click')
}
</script>

<style lang="scss">
@font-face {
  font-family: uniicons;
  src: url('./uniicons.ttf') format('truetype');
}

.uni-icons {
  font-family: uniicons;
  text-decoration: none;
  text-align: center;
}
</style> 